<template>
  <b-container fluid style="font-size: 0.9rem;">
    <InfoTable ref="InfoTable" location="relations" :filterFields="filterFields">
      <template slot="table-operation" slot-scope="row">
        <b-btn variant="outline-primary" style="margin-right:8px;padding:6px;font-size:0.7rem" @click="info(row.data)">详细信息</b-btn>
        <b-btn variant="outline-primary" style="margin-right:8px;padding:6px;font-size:0.7rem" @click="modelManagerModalShow($refs.InfoTable,row)">管理</b-btn>
        <b-btn variant="outline-primary" style="margin-right:8px;padding:6px;font-size:0.7rem" @click="deleteKeyword(row)">删除</b-btn>
      </template>
      <template slot="table-key" slot-scope="row">
        {{getKey(row.data.item._links.self.href)}}
      </template>
      <template slot="table-clazz" slot-scope="row">
        {{row.data.item.clazz | clazz}}
      </template>
    </InfoTable>
    <!-- details删除Modal -->
    <b-modal ref="ModelManagerModal" ok-only title="模型管理" size="lg">
      <b-container fluid>
        <InfoTable v-if="modal.show==true" ref="ModelManagerTable" location="details/search/relation" :param="modal.param">
          <template slot="button-operation" slot-scope="row">
            <b-btn variant="outline-primary" style="margin-right:8px;padding:6px;font-size:0.7rem" @click="detailsAssociateManagerModalShow($refs.ModelManagerTable,modal.currentRecord)">新建关联</b-btn>
            <b-btn variant="outline-primary" style="margin-right:8px;padding:6px;font-size:0.7rem" @click="batchRemoveAssociate($refs.ModelManagerTable)">批量删除</b-btn>
          </template>
          <template slot="table-operation" slot-scope="row">
            <b-btn variant="outline-primary" style="margin-right:5px;padding:5px;font-size:0.7rem" @click="removeAssociate($refs.ModelManagerTable,row)">删除</b-btn>
          </template>
        </InfoTable>
      </b-container>
    </b-modal>
    <!--  details添加Modal -->
    <b-modal ref="DetailsAssociateManagerModal" ok-only title="模型管理" size="lg">
      <b-container fluid>
        <InfoTable v-if="modal.show==true" ref="DetailsAssociateManagerTable" location="details/search/notRelation" :param="modal.param">
          <template slot="button-operation" slot-scope="row">
            <b-btn variant="outline-primary" style="margin-right:8px;padding:6px;font-size:0.7rem" @click="batchAddAssociate($refs.DetailsAssociateManagerTable)">批量添加</b-btn>
          </template>
          <template slot="table-operation" slot-scope="row">
            <b-btn variant="outline-primary" style="margin-right:5px;padding:5px;font-size:0.7rem" @click="addAssociate($refs.DetailsAssociateManagerTable,row)">添加</b-btn>
          </template>
        </InfoTable>
      </b-container>
      <div slot="modal-footer" class="w-100">
        <b-btn size="sm" class="float-right" variant="primary" @click="$refs.DetailsAssociateManagerModal.hide(),$refs.ModelManagerModal.show()">
          返回
        </b-btn>
      </div>
    </b-modal>
  </b-container>
</template>

<script>
import InfoModal from "components/InfoModal";
import InfoTable from "components/InfoTable";
import {
  baseURL,
  get,
  save,
  associate,
  getAndAssociate,
  remove
} from "src/service/api";
import axios from "axios";

// 表格：功能有过滤,排序，limit等功能默认都是未开启的
export default {
  name: "Manager",
  components: {
    InfoModal,
    InfoTable
  },
  filters: {
    clazz: function(value) {
      switch (value) {
        case 0:
          return "根目录";
          break;
        case 1:
          return "二级目录";
          break;
        case 2:
          return "三级目录";
          break;
      }
    }
  },
  data() {
    return {
      filterFields: ["clazz", "key"],
      currentRecord: {},
      modal: {
        currentRecord: {},
        param: "",
        name: "",
        show: false
      }
    };
  },
  computed: {},
  methods: {
    getKey(str) {
      let position = str.lastIndexOf("/");
      return str.substring(position + 1, str.length);
    },
    info(row) {
      console.log(row);
      this.$refs.InfoTable.info(row);
    },
    addAssociate: async function(o, row) {
      let self = this;
      console.log(this.modal.currentRecord);
      console.log(row.data.item);
      await o.addAssociate(
        this.getHref(this.modal.currentRecord.data.item, "relation"),
        this.getHref(row.data.item, "relations")
      );
      //o.addAssociate(
      // this.getSelfHref(this.modal.currentRecord.data.item),
      //this.getHref(row.data.item, "defect")
      // );
    },
    batchAddAssociate(o) {
      console.log(this.modal.currentRecord);
      o.batchAddAssociate(
        this.getSelfHref(this.modal.currentRecord.data.item),
        "relations"
      );
    },
    batchRemoveAssociate(o) {
      console.log(this.modal.currentRecord);
      o.batchRemoveAssociate(
        this.getSelfHref(this.modal.currentRecord.data.item),
        "relations"
      );
    },
    deleteKeyword: async function(record) {
      console.log(record);
      let self = this;
      await remove(record.data.item._links.self.href)
        .then(response => {
          if (response.status == "204") {
            console.log("资源删除成功");
            self.$refs.InfoTable.refresh();
          }
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
    },
    getAndAssociate(path) {
      return getAndProperty(path);
    },
    getSelfHref(Record) {
      return Record._links.self.href;
    },
    getHref(Record, name) {
      return Record._links[name].href;
    },
    removeAssociate(o, row) {
      console.log(this.modal.currentRecord);
      o.removeAssociate(
        this.getHref(this.modal.currentRecord.data.item, "relation"),
        this.getHref(row.data.item, "relations")
      );
    },
    modelManagerModalShow(o, record) {
      console.log(record);
      this.currentRecord = record;
      this.modal.currentRecord = this.currentRecord;
      let key = parseInt(o.getKey(record.data.item._links.self.href));
      console.log(key);
      // 配置参数
      this.modal.param = "relationId=" + key;
      this.modal.show = true;
      this.modal.name = "ModelManagerModal";
      this.$refs.ModelManagerModal.show();
    },
    detailsAssociateManagerModalShow(o, row) {
      console.log(this.$refs);
      // 获取记录的主键
      let key = parseInt(o.getKey(row.data.item._links.self.href));
      console.log(key);
      // 配置参数
      this.modal.param = "relationId=" + key;
      this.modal.show = true;
      this.modal.name = "DetailsAssociateManagerModal";
      // 打开管理器
      this.$refs.DetailsAssociateManagerModal.show();
    }
  }
};
</script>
<style lang="scss">
.table th,
.table td {
  vertical-align: middle;
}
.custom-select {
  float: left;
}
</style>
